import { Row, Col, Card, Statistic, Progress } from 'antd'
import { UserOutlined, LikeOutlined, HeartOutlined, TeamOutlined, ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons'
import ReactECharts from 'echarts-for-react'
import './index.scss'

const UserBehavior = () => {
  // 数据总览
  const overviewData = [
    { title: '图书生产量', value: 1902, icon: <UserOutlined />, color: '#faad14' },
    { title: '图书点赞量', value: 2445, icon: <LikeOutlined />, color: '#1890ff' },
    { title: '图书收藏量', value: 3056, icon: <HeartOutlined />, color: '#52c41a' },
    { title: '活跃用户数', value: 688, icon: <TeamOutlined />, color: '#722ed1' }
  ]

  // 今日阅读统计
  const todayStats = [
    { name: '分享量', value: 1.62, max: 2.0 },
    { name: '评论量', value: 1.45, max: 2.0 },
    { name: '点赞量', value: 1.82, max: 2.0 }
  ]

  // 趋势数据
  const trendData = [
    { date: '12-11', type: '图书阅读量', value: 2000 },
    { date: '12-11', type: '图书点击量', value: 1800 },
    { date: '12-11', type: '图书生产量', value: 1500 },
    { date: '12-11', type: '活跃用户数', value: 800 },
    { date: '12-12', type: '图书阅读量', value: 2800 },
    { date: '12-12', type: '图书点击量', value: 2400 },
    { date: '12-12', type: '图书生产量', value: 1600 },
    { date: '12-12', type: '活跃用户数', value: 1200 },
    { date: '12-13', type: '图书阅读量', value: 2600 },
    { date: '12-13', type: '图书点击量', value: 2200 },
    { date: '12-13', type: '图书生产量', value: 1700 },
    { date: '12-13', type: '活跃用户数', value: 1000 },
    { date: '12-14', type: '图书阅读量', value: 2200 },
    { date: '12-14', type: '图书点击量', value: 2000 },
    { date: '12-14', type: '图书生产量', value: 1400 },
    { date: '12-14', type: '活跃用户数', value: 900 },
    { date: '12-15', type: '图书阅读量', value: 2800 },
    { date: '12-15', type: '图书点击量', value: 2300 },
    { date: '12-15', type: '图书生产量', value: 1600 },
    { date: '12-15', type: '活跃用户数', value: 1100 },
    { date: '12-16', type: '图书阅读量', value: 3000 },
    { date: '12-16', type: '图书点击量', value: 2400 },
    { date: '12-16', type: '图书生产量', value: 1800 },
    { date: '12-16', type: '活跃用户数', value: 1300 },
    { date: '12-17', type: '图书阅读量', value: 3034 },
    { date: '12-17', type: '图书点击量', value: 2567 },
    { date: '12-17', type: '图书生产量', value: 1468 },
    { date: '12-17', type: '活跃用户数', value: 966 }
  ]

  // 雷达图数据
  const radarData = [
    { dimension: '运营', type: '纯文本', value: 85 },
    { dimension: '运营', type: '圣文类', value: 75 },
    { dimension: '运营', type: '视频类', value: 70 },
    { dimension: '海宏', type: '纯文本', value: 65 },
    { dimension: '海宏', type: '圣文类', value: 80 },
    { dimension: '海宏', type: '视频类', value: 75 },
    { dimension: '体育', type: '纯文本', value: 70 },
    { dimension: '体育', type: '圣文类', value: 65 },
    { dimension: '体育', type: '视频类', value: 85 },
    { dimension: '科技', type: '纯文本', value: 75 },
    { dimension: '科技', type: '圣文类', value: 70 },
    { dimension: '科技', type: '视频类', value: 80 },
    { dimension: '财经', type: '纯文本', value: 80 },
    { dimension: '财经', type: '圣文类', value: 85 },
    { dimension: '财经', type: '视频类', value: 70 },
    { dimension: '其他', type: '纯文本', value: 60 },
    { dimension: '其他', type: '圣文类', value: 65 },
    { dimension: '其他', type: '视频类', value: 75 }
  ]

  // 用户留存趋势
  const retentionData = [
    { date: '1', value: 3.42 },
    { date: '2', value: 3.5 },
    { date: '3', value: 3.8 },
    { date: '4', value: 4.2 },
    { date: '5', value: 4.5 },
    { date: '6', value: 4.8 },
    { date: '7', value: 5.2 }
  ]

  // 用户留存量柱状图
  const retentionColumnData = [
    { month: '1月', value: 240 },
    { month: '2月', value: 280 },
    { month: '3月', value: 320 },
    { month: '4月', value: 300 },
    { month: '5月', value: 350 },
    { month: '6月', value: 380 },
    { month: '7月', value: 340 },
    { month: '8月', value: 360 },
    { month: '9月', value: 400 },
    { month: '10月', value: 420 },
    { month: '11月', value: 380 },
    { month: '12月', value: 360 }
  ]

  // 内容消费趋势
  const consumptionData = [
    { date: '1', value: 1.8 },
    { date: '2', value: 1.7 },
    { date: '3', value: 1.6 },
    { date: '4', value: 1.5 },
    { date: '5', value: 1.4 },
    { date: '6', value: 1.3 },
    { date: '7', value: 1.2 }
  ]

  // 内容消费量柱状图
  const consumptionColumnData = [
    { month: '1月', value: 720 },
    { month: '2月', value: 740 },
    { month: '3月', value: 760 },
    { month: '4月', value: 750 },
    { month: '5月', value: 780 },
    { month: '6月', value: 800 },
    { month: '7月', value: 820 },
    { month: '8月', value: 840 },
    { month: '9月', value: 860 },
    { month: '10月', value: 880 },
    { month: '11月', value: 870 },
    { month: '12月', value: 890 }
  ]

  // 图书类型分析饼图数据
  const pieData1 = [
    { type: 'UGC运营', value: 43 },
    { type: '图文网红', value: 8 },
    { type: '车载文案', value: 24 },
    { type: '行业运营', value: 21 },
    { type: '其他', value: 4 }
  ]

  const pieData2 = [
    { type: 'UGC运营', value: 43 },
    { type: '图文网红', value: 8 },
    { type: '车载文案', value: 24 },
    { type: '行业运营', value: 21 },
    { type: '其他', value: 4 }
  ]

  const pieData3 = [
    { type: 'UGC运营', value: 43 },
    { type: '图文网红', value: 8 },
    { type: '车载文案', value: 24 },
    { type: '行业运营', value: 21 },
    { type: '其他', value: 4 }
  ]

  // 趋势图配置
  const getLineOption = () => {
    const dates = [...new Set(trendData.map(item => item.date))]
    const types = [...new Set(trendData.map(item => item.type))]
    
    return {
      color: ['#5B8FF9', '#5AD8A6', '#FAAD14', '#9254DE'],
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: types,
        right: 0
      },
      grid: {
        left: '3%',
        right: '10%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: dates,
        boundaryGap: false
      },
      yAxis: {
        type: 'value'
      },
      series: types.map(type => ({
        name: type,
        type: 'line',
        smooth: true,
        lineStyle: { width: 2 },
        symbol: 'circle',
        symbolSize: 6,
        data: dates.map(date => {
          const item = trendData.find(d => d.date === date && d.type === type)
          return item ? item.value : 0
        }),
        markPoint: type === '图书阅读量' ? {
          data: [{ coord: ['12-17', 3034], value: '2021-12-17', itemStyle: { color: '#8c8c8c' } }]
        } : undefined
      }))
    }
  }

  // 雷达图配置
  const getRadarOption = () => {
    const dimensions = [...new Set(radarData.map(item => item.dimension))]
    const types = [...new Set(radarData.map(item => item.type))]
    
    return {
      color: ['#5B8FF9', '#5AD8A6', '#5D7092'],
      tooltip: {},
      legend: {
        data: types,
        bottom: 0
      },
      radar: {
        indicator: dimensions.map(dim => ({ name: dim, max: 100 }))
      },
      series: [{
        type: 'radar',
        data: types.map(type => ({
          name: type,
          value: dimensions.map(dim => {
            const item = radarData.find(d => d.dimension === dim && d.type === type)
            return item ? item.value : 0
          }),
          areaStyle: { opacity: 0.3 },
          lineStyle: { width: 2 }
        }))
      }]
    }
  }

  // 饼图配置
  const getPieOption = (data) => ({
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c}% ({d}%)'
    },
    legend: {
      bottom: 0
    },
    series: [{
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: true,
        position: 'inner',
        formatter: '{c}%',
        fontSize: 12
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 14,
          fontWeight: 'bold'
        }
      },
      data: data.map(item => ({
        name: item.type,
        value: item.value
      }))
    }]
  })

  return (
    <div className="user-behavior-container">
      {/* 数据总览和趋势分析 */}
      <Row gutter={[16, 16]}>
        <Col xs={24} xl={15}>
          <Card className="data-overview-card">
            {/* 数据总览 */}
            <div className="overview-section">
              <div className="section-title">数据总览</div>
              <Row gutter={[16, 16]}>
                {overviewData.map((item, index) => (
                  <Col xs={12} sm={12} md={6} key={index}>
                    <div className="overview-item">
                      <div className="overview-icon" style={{ background: item.color }}>
                        {item.icon}
                      </div>
                      <div className="overview-info">
                        <div className="overview-title">{item.title}</div>
                        <div className="overview-value">{item.value.toLocaleString()}</div>
                      </div>
                    </div>
                  </Col>
                ))}
              </Row>
            </div>

            {/* 数据趋势 */}
            <div className="trend-section">
              <div className="section-title">数据趋势</div>
              <div className="trend-chart">
                <ReactECharts option={getLineOption()} style={{ height: '300px' }} />
              </div>
            </div>
          </Card>
        </Col>

        <Col xs={24} xl={9}>
          <div className="right-panel-wrapper">
            {/* 今日阅读统计 */}
            <Card className="stats-card">
              <div className="section-title">今日阅读统计</div>
              <div className="stats-list">
                {todayStats.map((stat, index) => (
                  <div key={index} className="stat-item">
                    <div className="stat-info">
                      <span className="stat-name">{stat.name}</span>
                      <span className="stat-value">{stat.value}</span>
                    </div>
                    <Progress 
                      percent={(stat.value / stat.max) * 100} 
                      showInfo={false}
                      strokeColor="#1890ff"
                      strokeWidth={8}
                    />
                  </div>
                ))}
              </div>
            </Card>

            {/* 内容题材分布 */}
            <Card className="radar-card">
              <div className="section-title">内容题材分布</div>
              <ReactECharts option={getRadarOption()} style={{ height: '280px' }} />
            </Card>
          </div>
        </Col>
      </Row>

      {/* 用户行为指标 */}
      <Row gutter={[16, 16]} style={{ marginTop: 16 }}>
        <Col xs={24} sm={12} xl={6}>
          <Card className="metric-card">
            <div className="metric-header">
              <span className="metric-title">用户留存趋势</span>
              <span className="metric-trend up">
                <ArrowUpOutlined />
              </span>
            </div>
            <div className="metric-value">5,982</div>
            <div className="metric-chart">
              <ReactECharts
                option={{
                  xAxis: { show: false, type: 'category' },
                  yAxis: { show: false, type: 'value' },
                  series: [{
                    data: retentionData.map(item => item.value),
                    type: 'line',
                    smooth: true,
                    showSymbol: false,
                    areaStyle: { opacity: 0.3 },
                    lineStyle: { color: '#1890ff' },
                    itemStyle: { color: '#1890ff' }
                  }],
                  grid: { left: 0, right: 0, top: 0, bottom: 0 }
                }}
                style={{ height: '80px' }}
              />
            </div>
          </Card>
        </Col>
        <Col xs={24} sm={12} xl={6}>
          <Card className="metric-card">
            <div className="metric-header">
              <span className="metric-title">用户留存量</span>
              <span className="metric-trend up">
                206 <ArrowUpOutlined />
              </span>
            </div>
            <div className="metric-value">2,942</div>
            <div className="metric-chart">
              <ReactECharts
                option={{
                  xAxis: { show: false, type: 'category' },
                  yAxis: { show: false, type: 'value' },
                  series: [{
                    data: retentionColumnData.map(item => item.value),
                    type: 'bar',
                    itemStyle: {
                      color: (params) => params.dataIndex % 2 === 0 ? '#5B8FF9' : '#61DDAA'
                    }
                  }],
                  grid: { left: 0, right: 0, top: 0, bottom: 0 }
                }}
                style={{ height: '80px' }}
              />
            </div>
          </Card>
        </Col>
        <Col xs={24} sm={12} xl={6}>
          <Card className="metric-card">
            <div className="metric-header">
              <span className="metric-title">内容消费趋势</span>
              <span className="metric-trend down">
                28% <ArrowDownOutlined />
              </span>
            </div>
            <div className="metric-value">1,382</div>
            <div className="metric-chart">
              <ReactECharts
                option={{
                  xAxis: { show: false, type: 'category' },
                  yAxis: { show: false, type: 'value' },
                  series: [{
                    data: consumptionData.map(item => item.value),
                    type: 'line',
                    smooth: true,
                    showSymbol: false,
                    areaStyle: { opacity: 0.3 },
                    lineStyle: { color: '#1890ff' },
                    itemStyle: { color: '#1890ff' }
                  }],
                  grid: { left: 0, right: 0, top: 0, bottom: 0 }
                }}
                style={{ height: '80px' }}
              />
            </div>
          </Card>
        </Col>
        <Col xs={24} sm={12} xl={6}>
          <Card className="metric-card">
            <div className="metric-header">
              <span className="metric-title">内容消费量</span>
              <span className="metric-trend up">
                22 <ArrowUpOutlined />
              </span>
            </div>
            <div className="metric-value">5,382</div>
            <div className="metric-chart">
              <ReactECharts
                option={{
                  xAxis: { show: false, type: 'category' },
                  yAxis: { show: false, type: 'value' },
                  series: [{
                    data: consumptionColumnData.map(item => item.value),
                    type: 'bar',
                    itemStyle: {
                      color: (params) => params.dataIndex % 2 === 0 ? '#5B8FF9' : '#61DDAA'
                    }
                  }],
                  grid: { left: 0, right: 0, top: 0, bottom: 0 }
                }}
                style={{ height: '80px' }}
              />
            </div>
          </Card>
        </Col>
      </Row>

      {/* 图书类型分析 */}
      <Row gutter={[16, 16]} style={{ marginTop: 16 }}>
        <Col xs={24} md={12} xl={8}>
          <Card title="图书类型分析" className="chart-card">
            <ReactECharts option={getPieOption(pieData1)} style={{ height: '280px' }} />
          </Card>
        </Col>
        <Col xs={24} md={12} xl={8}>
          <Card title="图文类" className="chart-card">
            <ReactECharts option={getPieOption(pieData2)} style={{ height: '280px' }} />
          </Card>
        </Col>
        <Col xs={24} md={12} xl={8}>
          <Card title="视频类" className="chart-card">
            <ReactECharts option={getPieOption(pieData3)} style={{ height: '280px' }} />
          </Card>
        </Col>
      </Row>
    </div>
  )
}

export default UserBehavior
